<template>
  <div class="container">
    <!-- box1 -->
    <div class="box1">
      <div class="box1-bg">
        <div class="box1-title">高级会员</div>
        <div class="box1-text1">
          在所有平台上享有20项高级功能、10倍清单和任务数量，助您实现更多目标和可能。
        </div>
        <div class="box1-button">现在就升级</div>
        <div class="box1-text2">一年高级会员只需￥139（每月仅￥11.6）</div>
      </div>
    </div>
    <!-- box2 -->
    <div class="box2" v-for="(item, index) in List" :key="index">
      <!-- 左侧布局，文字在左侧 -->
      <div style="display: flex" v-show="item.layout === 'left'">
        <div class="box2-left">
          <div class="box2-title">{{ item.title }}</div>
          <div class="box2-text">
            {{ item.text }}
          </div>
        </div>
        <div class="box2-right">
          <el-image class="image" :src="item.imageUrl"></el-image>
        </div>
      </div>
      <!-- 右侧布局，文字在右侧 -->
      <div style="display: flex" v-show="item.layout === 'right'">
        <div class="box2-left1">
          <el-image class="image" :src="item.imageUrl"></el-image>
        </div>
        <div class="box2-right1">
          <div class="box2-title">{{ item.title }}</div>
          <div class="box2-text">
            {{ item.text }}
          </div>
        </div>
      </div>
    </div>
    <!-- 更多功能，更多可能 -->
    <div class="box3">
      <div class="box3-title">更多功能，更多可能</div>
      <div class="box3-card">
        <el-card class="card" v-for="(item, index) in cardList" :key="index">
          <!-- <div class="card-left"></div> -->
          <div class="card-right">
            <div class="right-top">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 64 64"
                class="svg"
              >
                <path
                  fill-rule="evenodd"
                  clip-rule="evenodd"
                  fill="#fb8142"
                  :d="item.path"
                ></path>
              </svg>
              <div class="tltle">{{ item.title }}</div>
            </div>
            <div class="right-bottom">{{ item.note }}</div>
          </div>
        </el-card>
      </div>
    </div>
    <!-- 升级 -->
    <div class="box4">
      <div class="box4-title">即刻升级到高级会员</div>
      <div class="box4-button">升级</div>
      <div class="box4-price">一年高级会员只需￥139（每月仅￥11.6）</div>
    </div>
    <!-- other -->
    <div class="box5">
      <div class="box5-card" v-for="(item, index) in otherList" :key="index">
        <div class="box5-title">{{ item.title }}</div>
        <div class="box5-note">{{ item.note }}</div>
        <div class="box5-note1" v-show="item.note1.length > 0">
          {{ item.note1 }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "SeniorMember",
  components: {},
  data() {
    return {
      List: [
        {
          title: "像日历一样使用滴答清单",
          text: "不仅提供月视图和时间轴视图展示任务，还支持为任务设置开始时间和结束时间，甚至，您可以将其他日历订阅到滴答清单。",
          imageUrl:
            "https://cncdn.dida365.com/sites/res/aboutUpgrade/dida/feature/grid-calendar.png",
          layout: "left",
        },
        {
          title: "按您的方式组织所有事情",
          text: "除了支持更多清单与任务，您还可以过滤器并自定义筛选规则，按您自己的方式组织所有事情。",
          imageUrl:
            "https://cncdn.dida365.com/sites/res/aboutUpgrade/dida/feature/smart-list.png",
          layout: "right",
        },
        {
          title: "10倍扩容，扫清收集障碍",
          text: "299个清单、每个清单999个任务、每个任务199个检查事项...任何工作、备忘、想法或灵感，您都可以随时记录。",
          imageUrl:
            "https://cncdn.dida365.com/sites/res/aboutUpgrade/dida/feature/limit.png",
          layout: "left",
        },
        {
          title: "一切操作都有迹可循",
          text: "无论是日常回顾历史修订版本，还是了解团队项目进度，您都可以查看每个清单和任务的动态。",
          imageUrl:
            "	https://cncdn.dida365.com/sites/res/aboutUpgrade/dida/feature/t-activity.png",
          layout: "right",
        },
        {
          title: "了解自己的进步轨迹单",
          text: "您可以查看过去几个周期的历史统计数据，来了解自己的效率变化和习惯，更好的督促自己达成目标。",
          imageUrl:
            "https://cncdn.dida365.com/sites/res/aboutUpgrade/dida/feature/statistics.png",
          layout: "left",
        },
      ],
      cardList: [
        {
          path: "M32 13.9c10.9 0 19.7 8.8 19.7 19.7 0 5.8-2.5 11-6.5 14.6L46 54c.1.4-.2.9-.7.9-.2 0-.4 0-.6-.2l-4.3-3.4c-2.6 1.2-5.4 1.9-8.5 1.9-3 0-5.9-.7-8.5-1.9l-4.3 3.4c-.4.3-.9.2-1.2-.1-.1-.2-.2-.4-.2-.6l.8-5.8c-4-3.6-6.5-8.8-6.5-14.6.3-10.8 9.1-19.7 20-19.7zm1.6 9.1h-3.3v13.1h9.8v-3.3h-6.6l.1-9.8zm11.9-10.7c5.7 0 10.3 4.6 10.3 10.3 0 2.4-.8 4.6-2.2 6.3-1.5-6.9-6.3-12.7-12.7-15.5 1.4-.7 3-1.1 4.6-1.1zm-27 0c1.6 0 3.2.4 4.6 1.1-6.4 2.8-11.1 8.5-12.7 15.5C9 27.2 8.2 25 8.2 22.6c0-5.7 4.6-10.3 10.3-10.3z",
          title: "检查事项提醒",
          note: "检查事项提醒帮助您记住所有的事情，即便它只是一个小小的执行步骤。",
        },
        {
          path: "M53.5 29.9V52H10V29.9h43.5zM19 14.3V19c-.5.6-.8 1.4-.8 2.3 0 2 1.7 3.7 3.7 3.7s3.7-1.7 3.7-3.7c0-.9-.3-1.7-.8-2.3v-4.7h13.9V19c-.5.6-.8 1.4-.8 2.3 0 2 1.7 3.7 3.7 3.7s3.7-1.7 3.7-3.7c0-.9-.3-1.7-.8-2.3v-4.7h9v13.1H10V14.3h9zm2.9-3.3c.7 0 1.2.6 1.2 1.2v9c0 .7-.6 1.2-1.2 1.2s-1.2-.6-1.2-1.2v-9c0-.6.5-1.2 1.2-1.2zm19.7 0c.7 0 1.2.6 1.2 1.2v9c0 .7-.6 1.2-1.2 1.2-.7 0-1.2-.6-1.2-1.2v-9c0-.6.5-1.2 1.2-1.2z",
          title: "日历小部件",
          note: "滴答清单关心您的每一分钟，即便是碎片时间也能充满价值。不管何时何地，您只需要将日历小部件放在桌面，所有事情即刻呈现。",
        },
        {
          path: "M42.73 18.494c1.982.468 3.902 1.472 5.895 3.503a15.122 15.122 0 012.088 2.66L32.97 42.399c-.347.347-.621.76-.807 1.213l-.085.23-1.649 4.946a2.462 2.462 0 002.952 3.162l.162-.048 4.946-1.649a3.69 3.69 0 001.264-.724l.179-.168 13.19-13.19c-.968 11.505-10.48 18.803-22.073 18.803-12.234 0-22.154-8.131-22.154-20.756 0-5.238 1.701-9.29 4.581-12.222 1.991-2.028 3.909-3.033 5.886-3.5-.768.761-2.937 5.923-2.016 9.76 2.868-2.959 7.968-7.016 13.701-7.018 5.733.002 10.833 4.057 13.701 7.018.921-3.84-1.25-9.004-2.018-9.762zm14.194 6.914c.961.961.961 2.52 0 3.481L38.989 46.824a.826.826 0 01-.245.169l-5.677 2.543a.206.206 0 01-.271-.271l2.543-5.677a.826.826 0 01.169-.245l17.935-17.935a2.462 2.462 0 013.481 0zM30.558 10.667l4.426 1.637s-2.383.766-2.597 2.831c.692-.286 1.716-.468 3.397-.468 5.275 0 7.948-2.782 7.948-2.782s-.859 4.02-3.857 5.354c-.448.199-1.026.382-1.652.551 2.225 1.866 3.065 4.507 3.065 4.507-1.925-1.817-6.196-3.535-10.294-3.535-4.096 0-8.367 1.718-10.294 3.535 0 0 .847-2.663 3.094-4.532-.591-.162-1.14-.337-1.566-.527-2.998-1.334-3.857-5.354-3.857-5.354s2.671 2.782 7.946 2.782c1.351 0 2.267.121 2.939.315.03-2.372.101-3.827 1.302-4.314z",
          title: "预计番茄",
          note: "为任务设置预计番茄，以便更好的感知每一项任务可能耗费的时长。您还能对比预计番茄与实际获得番茄来了解自己的工作效率。",
        },
        {
          path: "M58.3 23v7.8c0 2.5-2 4.5-4.5 4.5H37.3c-1.1 0-2.1.9-2.1 2.1v6.2h1.6v8.6c0 1.6-1.3 2.9-2.9 2.9S31 53.8 31 52.2v-8.6h1.6v-6.2c0-2.5 2-4.5 4.5-4.5h16.4c1.1 0 2.1-.9 2.1-2.1V23h2.7zM17.2 36.9c3.8 4.6 5.7 7.9 5.7 10 0 3.1-2.6 5.6-5.7 5.6s-5.7-2.5-5.7-5.6c0-2.1 1.9-5.4 5.7-10zm36.1-25.4v18.1H13.9V11.5h39.4z",
          title: "会员专享主题",
          note: "滴答清单希望您每天都有美妙的心情，除了实用的功能和流畅的体验，也为您带来了新鲜好看的会员专享主题。",
        },
        {
          path: "M52.5 47.7c0 4.2-3.4 7.7-7.7 7.7s-7.7-3.4-7.7-7.7 3.4-7.7 7.7-7.7c.9 0 1.8.2 2.6.4V19.2l-20.5-2.1v25.4c0 4.2-3.4 7.7-7.7 7.7s-7.7-3.4-7.7-7.7 3.4-7.7 7.7-7.7c.9 0 1.8.2 2.6.4V11.5l30.8 3.1v33.1h-.1z",
          title: "番茄白噪音",
          note: "滴答清单希望帮助您在每一个番茄工作时间中，都更加专注，为此，我们带来了好听的番茄背景音，为您营造舒心而集中的工作环境。",
        },
        {
          path: "M31.6 9C44.5 9 55 19.5 55 32.4S44.5 55.8 31.6 55.8 8.2 45.3 8.2 32.4 18.7 9 31.6 9zm2 13.2h-4.1v8.2h-8.2v4.1h8.2v8.2h4.1v-8.2h8.2v-4.1h-8.2v-8.2z",
          title: "Android 悬浮球",
          note: "任何情况下，不管您当前正在使用什么应用程序，只要您想要写点什么，悬浮球都乖乖在屏幕边缘，点击一下即可记录。",
        },
      ],
      otherList: [
        {
          title: "如何退款",
          note: "如果你在 Android 设备或 Web 端，使用支付宝或微信购买。可以在 Web 端对购买 14 天内的订单申请退款，超过 14 天将无法申请退款。",
          note1: "如果您通过苹果 App Store 购买，需要向苹果官方申请退款。",
        },
        {
          title: "如何开发票",
          note: "您可以在 Web端 对近2个月的订单记录申请开具、查看并下载电子发票。",
          note1:
            "具体操作步骤如下：登录 Web端 - 点击头像 - 「设置」，在左侧边栏中点击「高级会员」-在最新订单右上角点击「发票/退款」，即可查看近期订单记录并开具发票。",
        },
        {
          title: "高级账户到期后数据会丢吗？",
          note: "我们非常注重保护您的数据安全。高级账户到期后，您的数据将被完整保留，您依然可以像免费账户一样正常使用滴答清单，但不能继续享受高级账户对应的特权。",
          note1: "",
        },
        {
          title: "其他疑问",
          note: "请移步帮助中心：https://help.dida365.com",
          note1: "或通过邮箱 mailto:support@dida365.com 联系我们。",
        },
      ],
    };
  },
  created() {},
  mounted() {},
  methods: {},
};
</script>

<style lang="less" scoped>
.container {
  width: 100%;
  height: 100%;
  background-color: #1c1c1c;
  padding-top: 72px;

  .box1 {
    width: 100%;
    height: 932px;
    background-color: #1c1c1c;
    text-align: center;
    color: #fff;
    padding-top: 150px;

    .box1-bg {
      width: 100%;
      height: 100%;
      background: radial-gradient(
        circle at 50% 100%,
        #fb8142 0,
        rgba(251, 129, 66, 0) 62%
      );
      opacity: 0.6;
      z-index: -1;

      .box1-title {
        line-height: 1.5;
        font-size: 60px;
        font-weight: 600;
      }

      .box1-text1 {
        width: 719px;
        margin: 78px auto 50px;
        line-height: 34px;
        letter-spacing: 1px;
        font-size: 24px;
        font-weight: 600;
      }

      .box1-button {
        min-width: 240px !important;
        line-height: 2.6em;
        height: 2.6em;
        font-weight: 700;
        font-size: 20px;
        border-radius: 6px;
        display: inline-block;
        padding: 0 10px;
        background-image: linear-gradient(90deg, #fd6a4f, #fc9e23);
        cursor: pointer;
        box-sizing: border-box;
      }

      .box1-text2 {
        margin-top: 54px;
        font-size: 16px;
        line-height: 24px;
      }
    }
  }

  .box2 {
    width: 100%;
    height: 640px;
    background-color: #1c1c1c;
    border: 1px solid #1c1c1c;
    color: #fff;
    display: flex;

    .box2-left {
      width: 46%;
      height: 154px;
      padding-top: 210px;
      padding-left: 120px;

      .box2-title {
        font-size: 36px;
        font-weight: 600;
        margin-bottom: 36px;
        line-height: 1.5;
      }

      .box2-text {
        color: rgba(255, 255, 255, 0.64);
        max-width: 510px;
        font-size: 18px;
        line-height: 32px;
      }
    }

    .box2-right {
      width: 50%;
      height: 452px;
      padding-top: 60px;
      padding-left: 120px;

      .image {
        width: 666px;
        height: 452px;
      }
    }

    .box2-left1 {
      width: 50%;
      height: 452px;
      padding-top: 60px;
      padding-left: 150px;

      .image {
        width: 653px;
        height: 478px;
      }
    }

    .box2-right1 {
      width: 48%;
      height: 154px;
      padding-top: 210px;
      padding-left: 200px;

      .box2-title {
        font-size: 36px;
        font-weight: 600;
        margin-bottom: 36px;
        line-height: 1.5;
      }

      .box2-text {
        color: rgba(255, 255, 255, 0.64);
        max-width: 510px;
        font-size: 18px;
        line-height: 32px;
      }
    }
  }

  .box3 {
    width: 100%;
    height: 864px;
    background-color: #1c1c1c;
    border: 1px solid #1c1c1c;
    color: #fff;
    padding-top: 120px;

    .box3-title {
      font-weight: 600;
      font-size: 48px;
      text-align: center;
      margin-bottom: 78px;
    }

    .box3-card {
      width: 90%;
      margin: 0 auto;
      height: 536px;
      display: flex;
      flex-wrap: wrap;

      .card {
        position: relative;
        width: 29%;
        height: 220px;
        color: #fff;
        background-color: #212121;
        border: 1px solid #1c1c1c;
        margin-left: 40px;
        display: flex;

        .card-left {
          position: relative;
          width: 5px;
          height: 220px;
          background: linear-gradient(to bottom, #fd6850, #fbb310);
        }

        .card-right {
          position: relative;
          // width: 98%;
          width: 390px;
          height: 200px;
          padding-top: 10px;
          margin-left: 10px;

          .right-top {
            display: flex;
            flex-wrap: nowrap;

            .svg {
              width: 64px;
              height: 64px;
            }

            .tltle {
              line-height: 1.5;
              font-weight: 600;
              font-size: 24px;
              margin-left: 10px;
              padding-top: 15px;
            }
          }

          .right-bottom {
            color: #fff;
            font-size: 16px;
            line-height: 24px;
            margin-top: 16px;
            padding-left: 10px;
          }
        }
      }
    }
  }
  .box4 {
    width: 100%;
    height: 470px;
    background-color: #212121;
    border: 1px solid #212121;
    text-align: center;
    padding-top: 100px;
    color: #fff;
    .box4-title {
      font-size: 60px;
      font-weight: 600;
      letter-spacing: 2px;
    }
    .box4-button {
      width: 388px;
      height: 52px;
      min-width: 388px;
      font-size: 20px;
      font-weight: 700;
      line-height: 2.6em;
      margin: 60px auto 0;
      background-image: linear-gradient(90deg, #fd6a4f, #fc9e23);
      box-sizing: border-box;
      border-radius: 10px;
    }
    .box4-price {
      font-size: 14px;
      line-height: 14px;
      margin-top: 16px;
    }
  }
  .box5 {
    width: 100%;
    height: 543px;
    background-color: #212121;
    border: 1px solid #212121;
    color: #fff;
    padding-top: 50px;
    padding-left: 230px;
    display: flex;
    flex-wrap: wrap;
    .box5-card {
      position: relative;
      width: 40%;
      height: 135px;
      padding-left: 20px;
      padding-right: 50px;
      .box5-title {
        font-size: 20px;
        font-weight: 600;
        margin-bottom: 20px;
      }
      .box5-note {
        margin-bottom: 30px;
        line-height: 1.3em;
      }
      .box5-note1 {
        line-height: 1.3em;
      }
    }
  }
}
</style>
